<script setup lang="ts">

import { ref } from 'vue';
import { loginUser } from '../services/LoginService';

const msg = ref('')


function handleLogin() {

  const emailInput = document.getElementById('email') as HTMLInputElement | null;
  const passwordInput = document.getElementById('password') as HTMLInputElement | null;
  const email = emailInput ? emailInput.value : '';
  const password = passwordInput ? passwordInput.value : '';
  if (!email || !password) {
    return
  }

  loginUser(email, password).then((code) => {
    if (code === 1) {
      msg.value = '密码错误'
    }
    if (code === 2) {
      msg.value = '用户不存在'
    }
    if (code === 3) {
      msg.value = '邮箱格式错误'
    }
  })
}

</script>

<template>
  <div class="login-page">
    <div class="login-card">
      <h2 class="login-title">用户登录</h2>
      <div class="login-form">
        <div class="form-group">
          <label for="email">邮箱</label>
          <input type="email" id="email" placeholder="请输入用户名" />
        </div>
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" id="password" placeholder="请输入密码" />
        </div>
        <button type="button" class="login-button" @click="handleLogin">登录</button>
        <p class="register-tip">
          还没有账号？<router-link to="/register">注册</router-link>
        </p>
        <p style="color: red;">{{ msg }}</p>
      </div>
    </div>
  </div>
</template>

<style scoped>
.login-page {
  min-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-card {
  background-color: #ffffff;
  padding: 40px 32px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  height: 350px;
  width: 360px;
}

.login-title {
  text-align: center;
  margin-bottom: 24px;
  font-size: 24px;
  color: #333;
}

.login-form .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.login-form label {
  margin-bottom: 6px;
  font-size: 14px;
  color: #555;
}

.login-form input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  outline: none;
  transition: border-color 0.2s;
}

.login-form input:focus {
  border-color: #42b983;
}

.login-button {
  width: 100%;
  padding: 10px;
  background-color: #42b983;
  color: white;
  font-weight: bold;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.login-button:hover {
  background-color: #369f6b;
}

.register-tip {
  text-align: center;
  margin-top: 16px;
  font-size: 14px;
  color: #555;
}

.register-tip a {
  color: #42b983;
  text-decoration: none;
}

.register-tip a:hover {
  text-decoration: underline;
}
</style>
